<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>弹出式提示</title>
    <link rel="stylesheet" href="../basestyle.css">
    <link rel="stylesheet" href="../button/button.css">
    <link rel="stylesheet" href="./toast.css">
    <link rel="stylesheet" href="../loading.css">
</head>
<body>
<div class="page js_show">
    <div class="page__bd page__bd_spacing">
        <a href="javascript:;" class="btn btn_default" id="showToast">成功提示</a>
        <a href="javascript:;" class="btn btn_default" id="showLoadingToast">加载中提示</a>
    </div>

    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="mask_transparent"></div>
        <div class="toast">
            <i class="icon-success-no-circle icon_toast"></i>
            <p class="toast__content">已完成</p>
        </div>
    </div>
    <!--end toast-->

    <!-- loading toast -->
    <div id="loadingToast" style="display: none;">
        <div class="mask_transparent"></div>
        <div class="toast">
            <i class="loading icon_toast "></i>
            <p class="toast__content">数据加载中</p>
        </div>
    </div>
</div>
<script src="../zepto.min.js"></script>
<script src="./toast.js"></script>
<script>
    $(function () {
        $("#showToast").click(function () {
//        $("#toast").show();
//            $("#toast").css("display","block")
//            setTimeout(function () {
//                $("#toast").hide()
//            },20000)
            toast(2000)

        })
        $("#showLoadingToast").click(function () {
//            $("#loadingToast").css("display","block")
//            setTimeout(function () {
//                $("#loadingToast").hide()
//            },20000)
            loadToast(2000)
        })
    })
</script>
</body>
</html>